<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
  <p v-if="seen">show while seen is true</p>
  <p v-else>show while seen is false</p>
  <button v-on:click="{{seen = !seen}}">切换显示</button>
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
  <p>{{counter}}</p>
  <button v-on:click="counter += 1">增加1</button>
  <button v-on:click="onClick">增加1</button>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        seen: true,
        sites: [
           { name: "site1" },
           { name: "site1" },
           { name: "site1" }
        ],
        counter: 0,
        onClick: function(event) {
            counter += 1;
        }
    }
});
</script>
</body>
</html>